SSR · SSG · ISR：概念与优缺点

独立 Vite 应用默认仍是 SPA；要做 SSR，需在框架层接入 服务端入口 + 客户端注水（如官方 Vue/React SSR 指南），或使用 Nuxt（底层封装 Vite + Nitro）、SvelteKit 等元框架。下文三种渲染策略与具体脚手架解耦，便于把握概念。

详细

SSR (Server-Side Rendering): 服务端渲染，每次请求时在服务器上生成 HTML 返回给客户端。
SSG (Static Site Generation): 静态站点生成，在构建时生成静态 HTML 文件，可在 CDN 缓存。
ISR (Incremental Static Regeneration): 增量静态再生，结合 SSG 和 SSR，允许在运行时更新静态页面，而无需重新构建整个站点。

在现代前端开发中，特别是使用 React、Vue 等框架并结合 Next.js、Nuxt.js 或 Gatsby 等元框架时，
SSR、SSG 和 ISR 是三种核心的渲染模式。它们决定了页面内容在何时、何地被生成，直接影响网站的性能、SEO 和用户体验。

回答

# SSR (Server-Side Rendering) - 服务端渲染
服务端渲染，每次请求时在服务器上生成 HTML 返回给客户端。

优点：
SEO 友好：搜索引擎爬虫直接获取到完整的 HTML 内容，有利于抓取和索引。
首屏加载速度快：用户能更快看到完整内容，无需等待客户端 JS 执行完毕。
适用于动态内容：每次请求都能获取最新数据，适合个性化、实时性要求高的页面（如用户信息、实时行情）。
缺点：
服务器压力大：每个请求都需要服务器渲染，高并发时成本较高。
响应时间较长：相比静态文件，服务器生成 HTML 需要时间，可能影响首字节时间（TTFB）。
用户体验可能不佳：页面跳转时，每次都需要等待服务器响应，可能感觉比单页应用慢（除非配合客户端导航）。
复杂性增加：需要考虑服务器环境、数据获取失败处理、缓存策略等。

# SSG (Static Site Generation) - 静态站点生成
静态站点生成，在构建项目时生成静态 HTML 文件，可在 CDN 缓存。
在构建时（Build Time）就预先获取数据，生成完整的 HTML 文件以及其他静态资源。这些文件可以直接部署在 CDN 上，用户请求时直接返回预先生成的 HTML。

优点：
极致的性能：HTML 文件已在 CDN 边缘节点，访问速度极快，首字节时间（TTFB）几乎最低。
高可靠性：不依赖复杂服务器，静态文件很难出故障，抗高并发能力强。
低成本：无需运行复杂服务器，可托管在对象存储或 CDN 上，成本极低。
SEO 友好：和 SSR 一样，HTML 内容完整。
缺点：
构建时间随内容增长而增加：对于大型网站（如数万篇博客），每次构建都可能耗时很久。
内容更新滞后：内容更新后，需要重新构建并部署整个站点才能生效，不适合实时数据或频繁更新的内容。
数据在所有用户间一致：无法根据请求动态生成个性化内容（除非配合客户端渲染获取数据）。

# ISR (Incremental Static Regeneration) - 增量静态再生
增量静态再生，结合 SSG 和 SSR，允许在运行时更新静态页面，而无需重新构建整个站点。
ISR 是 Next.js 首创的一种混合模式，可以看作是 SSG 的升级版。它允许你在保留静态页面优势的同时，在运行时按需更新部分页面，而无需重新构建整个应用。

优点：
兼顾性能与实时性：大多数情况下响应静态文件，速度极快，又能定时或在触发时更新内容。
解决构建时长问题：只需构建更改的页面，无需全量构建，适合超大型网站。
平滑的内容更新：用户几乎感觉不到内容更新带来的延迟，体验优秀。
按需渲染：某些 ISR 实现甚至支持按需（On-demand）更新，即通过 API 触发特定页面重新生成，实现内容即时更新。
缺点：
实现和心智模型相对复杂：需要理解缓存、回退（fallback）状态、过期时间等概念。
存在一定的数据延迟窗口：在过期后、重新生成完成前，用户看到的是旧数据。虽然可接受，但严格实时性场景不适用。
回退页面处理：在生成过程中，如何优雅处理未生成的页面（显示加载中或骨架屏）需要额外设计。
并非所有框架都内置：目前主要依赖 Next.js 等框架的实现。